
<template>

    <router-link tag="div" to="/Index" class="cover">
        <transition name="fade">
            <div class="img" v-if="flag">
                <img src="../../public/logo.jpg" alt="">
            </div>
        </transition>

        <div class="text">
            <transition name="slide-fade1" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                <h3 v-if="flag">天亮教育</h3>
            </transition>
            <transition name="slide-fade2" @before-enter="beforeEnter2" @enter="enter2" @after-enter="afterEnter2">
            <h4 v-if="flag">小组名：攻坚小组</h4>
            </transition>

            <transition name="slide-fade3" @before-enter="beforeEnter3" @enter="enter3" @after-enter="afterEnter3">
                <h4 v-if="flag">小组成员：崔鸣远 许瀚文</h4>
            </transition>
            <transition name="slide-fade4" @before-enter="beforeEnter4" @enter="enter4" @after-enter="afterEnter4">
                <h4 v-if="flag">口号：人生得意须尽欢，莫使金樽空对月。</h4>
            </transition>

        </div>

    </router-link>

</template>

<script>
    export default {
            name: "Cover",
        data(){
                return{
                    flag: false
                }
        },
        mounted() {
          this.flag = true
            // debugger
        },
        methods: {
            beforeEnter(el) {
                // console.log("进场之前");
                // debugger
                el.style.opactiy = "0"
                el.style.transform = 'translateX(-400px)'
            },
            enter(el) {
                this.flag = true
                // 执行这个后，浏览器刷新了动画
                el.offsetWidth;
                // console.log("进场");
                el.style.transition = "all 1s ease"
                el.style.opactiy = "1"
                el.style.transform = "translateX(0)"

            },
            afterEnter(el) {
                // console.log("进场之后");
            },




            beforeEnter2(el) {
                // console.log("进场之前");
                // debugger
                el.style.opactiy = "0"
                el.style.transform = 'translateX(-400px)'
            },
            enter2(el) {
                this.flag = true
                // 执行这个后，浏览器刷新了动画
                el.offsetWidth;
                // console.log("进场");
                el.style.transition = "all 2s ease"
                el.style.opactiy = "1"
                el.style.transform = "translateX(0)"

            },
            afterEnter2(el) {
                // console.log("进场之后");
            },

            beforeEnter3(el) {
                // console.log("进场之前");
                // debugger
                el.style.opactiy = "0"
                el.style.transform = 'translateX(-400px)'
            },
            enter3(el) {
                this.flag = true
                // 执行这个后，浏览器刷新了动画
                el.offsetWidth;
                // console.log("进场");
                el.style.transition = "all 3s ease"
                el.style.opactiy = "1"
                el.style.transform = "translateX(0)"

            },
            afterEnter3(el) {
                // console.log("进场之后");
            },

            beforeEnter4(el) {
                // console.log("进场之前");
                // debugger
                el.style.opactiy = "0"
                el.style.transform = 'translateX(-400px)'
            },
            enter4(el) {
                this.flag = true
                // 执行这个后，浏览器刷新了动画
                el.offsetWidth;
                // console.log("进场");
                el.style.transition = "all 4s ease"
                el.style.opactiy = "1"
                el.style.transform = "translateX(0)"

            },
            afterEnter4(el) {
                // console.log("进场之后");
            }
        },
    }

</script>

<style scoped lang="less">
    .cover {
            height: 100vh;
            background: url("../../public/6f10bced244725643d36d77000f398e5.jpg")
            no-repeat left top;
            background-size: 100% 100%;
            overflow: hidden;
            .img{
                    height: 161px;
                    width: 161px;
                    border-radius: 50%;
                    margin: 30px auto;
                    position: relative;
                    overflow: hidden;
                    img{
                            position: absolute;
                            left: -20px;
                            top: -20px;
                    }
            }
            .text{
                    color: white;
                    margin: 40% 0 0 10px;
                    h4{
                            padding-top: 30px;
                    }
            }

    }


    .fade-enter-active, .fade-leave-active {
        transition: opacity 2.5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

    .fade2-enter-active, .fade-leave-active {
        transition: opacity 2.5s;
    }
    .fade2-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

    .fade3-enter-active, .fade-leave-active {
        transition: opacity 2.5s;
    }
    .fade3-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

    .fade4-enter-active, .fade-leave-active {
        transition: opacity 2.5s;
    }
    .fade4-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>